<template>
  <el-dialog
    v-model="dialog"
    append-to-body
    :modal="props.dialogConfig.dialogModal"
    :close-on-click-modal="props.dialogConfig.dialogClickModalClose"
    :close-on-press-escape="props.dialogConfig.dialogESCModalClose"
    :draggable="props.dialogConfig.dialogDraggable"
    :show-close="props.dialogConfig.dialogShowClose"
    :title="props.dialogConfig.dialogTitle"
    :width="props.dialogConfig.dialogWidth"
    :align-center="props.dialogConfig.dialogAlignCenter"
    :center="props.dialogConfig.dialogContentCenter"
    @close="close"
  >
    <slot name="content"></slot>
    <template #footer v-if="props.dialogConfig.dialogFooterBtn">
      <el-button @click="close">
        {{ props.dialogConfig.dialogFootCancelBtnText }}
      </el-button>
      <el-button type="primary" @click="onConfirm">
        {{ props.dialogConfig.dialogFootConfirmBtnText }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup name="DialogComponent">
import { withDefaults, ref, watch } from 'vue'

interface Props {
  visible: boolean
  dialogConfig?: {
    dialogTitle: string //模态框标题名称
    dialogWidth: string //模态框弹窗宽度
    dialogShowClose: any //是否显示关闭按钮
    dialogModal: any //是否需要模态框(遮罩层)
    dialogAlignCenter: any //是否水平垂直对齐模态框
    dialogContentCenter: any //模态框header和footer内容是否居中对齐
    dialogClickModalClose: any //是否可以通过点击遮罩层关闭Dialog
    dialogESCModalClose: any //是否可以通过按下ESC关闭Dialog
    dialogDraggable: any //是否开启模态框拖拽功能
    dialogFooterBtn: any //是否开启底部操作按钮
    dialogFootConfirmBtnText: any // 底部确定按钮文案
    dialogFootCancelBtnText: any // 底部取消按钮文案
  }
}

interface Emits {
  (event: 'confirm', isShow: boolean): void
  (event: 'close', isShow: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  dialogConfig: () => {
    return {
      dialogTitle: '默认标题',
      dialogWidth: '40%',
      dialogShowClose: true,
      dialogModal: true,
      dialogAlignCenter: false,
      dialogContentCenter: false,
      dialogClickModalClose: false,
      dialogESCModalClose: false,
      dialogDraggable: false,
      dialogFooterBtn: true,
      dialogFootConfirmBtnText: '确定',
      dialogFootCancelBtnText: '取消'
    }
  }
})

const dialog = ref<boolean>(props.visible)
// watch监听
watch(
  () => props.visible,
  val => {
    dialog.value = val
  }
)

const emits = defineEmits<Emits>() //将定义Emits数据类型赋值

// 保存提交回调函数
const onConfirm = () => {
  emits('confirm', false) //emit方法供父级组件调用
}

// 关闭事件回调函数
const close = () => {
  emits('close', false) //emit方法供父级组件调用
}
</script>

<style scoped></style>
